<template>
    <div :style="carStyle" @click="gotoUrl(obj)">
        <div class="defaultText" v-if="obj.tableData.colId == ''">请选择数据资源</div>
        <template v-if="fileType == 0">
            <img :src="dataList[fileIndex]" class="cardimg" width="100%" height="100%" alt="" />
        </template>
        <template v-else-if="fileType == 1">
            <video width="100%" height="100%" class="videplay" type="video/mp4" preload="" x-webkit-airplay="true"
                airplay="allow" webkit-playsinline="true" playsinline="true" controlslist=""
                x5-video-orientation="portraint" :autoplay="true" controls muted ref="media" id="media"
                style="position:relative;top:0;"></video>
        </template>
        <!-- <div class="gotoViewBtn" v-if="isGotoView" @click="gotoUrl(obj)"></div> -->
    </div>
</template>

<script>
// import { cardDataLoad, boardLoad } from '@/api/share'

export default {
    Name: "TableFile",
    props: {
        obj: Object,
        isEdit: {
            type: Boolean,
            default: false,
        },
        isReload: {
            type: Boolean,
            default: false
        },
        // gotoUrl: Function,
    },
    data() {
        return {
            carStyle: {},
            filterForm: {
                pageInfo: {
                    pageSize: 10,
                    page: 1,
                    totalCount: 0
                },
                tableId: 0,
                structureIds: []
            },
            timer: null,
            timer2: null,
            dataList: [],
            fileType: undefined,
            fileIndex: 0,
        }
    },
    computed: {
        isGotoView() {
            if (this.isEdit == false && this.obj.contactType > 0) {
                if (this.obj.contactType == 1 && this.obj.boardId) {
                    return true;
                }
                if (this.obj.contactType == 2 && this.obj.url) {
                    return true;
                }
            }
            return false;
        },
    },
    mounted() {
        this.setStyle();

        this.$nextTick(function () {
            this.reloadInfo();
        })
        this.dataStr = JSON.stringify(this.obj.tableData);

        // 首次打开计算筛选默认时间
        // #region
        // var beginTime = "";
        // var endTime = "";
        // const end = new Date();
        // const start = new Date();

        // if (this.obj.tableData.filterTimeType == 99) {
        //     beginTime = undefined;
        //     endTime = undefined;
        // } else if (this.obj.tableData.filterTimeType > 0) {
        //     start.setTime(start.getTime() - 3600 * 1000 * 24 * this.obj.tableData.filterTimeType);
        //     beginTime = this.parseTime(start, "{y}-{m}-{d}");
        //     endTime = this.parseTime(end);
        // } else {
        //     beginTime = undefined;
        //     endTime = undefined;
        // }
        // this.filterForm.beginTime = beginTime;
        // this.filterForm.endTime = endTime;
        // #endregion
    },
    methods: {
        reloadInfo() {
            var timeSize = 60;
            if (this.obj.tableData.reloadTime) {
                timeSize = this.obj.tableData.reloadTime;
            }

            const end = new Date();
            const start = new Date();
            if (this.obj.tableData.type != 1) {
                this.filterForm.isOnlie = true;

                // 查询一天内数据
                start.setTime(start.getTime() - 3600 * 1000 * 24);
                this.filterForm.beginTime = this.parseTime(start);
                this.filterForm.endTime = this.parseTime(end);
            } else {
                this.filterForm.isOnlie = false;

                start.setTime(start.getTime() - 3600 * 1000 * 24 * 15);
                this.filterForm.beginTime = this.parseTime(start, "{y}-{m}-{d}");
                this.filterForm.endTime = this.parseTime(end);

                // 刷新时间兼容处理
                if (timeSize < 60) {
                    timeSize = 60;
                }
            }

            clearInterval(this.timer);
            this.getLineData();

            if (this.isReload) {
                this.timer = setInterval(() => {
                    const end = new Date();
                    this.filterForm.endTime = this.parseTime(end);

                    this.getLineData();
                }, timeSize * 1000);
            }
        },
        getLineData() {
            this.filterForm.pageInfo.pageSize = this.obj.tableData.count;
            if (this.obj.tableData.tableId && this.obj.tableData.colId) {
                this.filterForm.tableId = this.obj.tableData.tableId;
                var idlist = [this.obj.tableData.colId];

                this.filterForm.structureIds = idlist;
                if (this.obj.tableData.type != 1) {
                    cardDataLoad(this.filterForm).then((res) => {
                        if (res.data.code == 0) {
                            this.dataServerLazy(res.data.data.dataResult.dataList);
                        } else {
                            console.error(res.data.message)
                        }
                    }).catch(() => {
                        clearInterval(this.timer)
                    });
                } else {
                    boardLoad(this.filterForm).then((res) => {
                        if (res.data.code == 0) {
                            this.dataServerLazy(res.data.data.dataResult.dataList);
                        } else {
                            console.error(res.data.message)
                        }
                    }).catch(() => {
                        clearInterval(this.timer)
                    });
                }
            }
        },
        setStyle() {
            var style = this.obj.style;

            var backgroundColor = "";
            var backgroundImage = "";
            // 背景颜色
            if (style.backgroundImage.length) {
                backgroundImage = `url(${style.backgroundImage}`;
            } else if (style.backgroundColor.length > 0) {
                backgroundColor = style.backgroundColor;
            } else {
                backgroundColor = "";
            }

            var boxShadow = "";
            if (style.boxShadow) {
                boxShadow = `${style.boxShadow.h}px ${style.boxShadow.v}px ${style.boxShadow.blur}px ${style.boxShadow.spreed}px ${style.boxShadow.color}`
            }

            this.carStyle = {
                boxShadow,
                width: "100%",
                height: "100%",
                display: "flex",
                backgroundSize: "100% 100%",
                borderStyle: "solid",
                backgroundImage,
                backgroundColor,
                color: style.color,
                fontSize: style.fontSize + "px",
                justifyContent: style.justifyContent,
                alignItems: style.alignItems,
                borderColor: style.borderColor,
                borderWidth: style.borderWidth + "px",
                borderRadius: style.borderRadius + "px",
                fontWeight: style.fontWeight,
                fontStyle: style.fontStyle,
            }

            // #region 新的背景颜色

            if (this.obj.style.bgcolorType == "image") {
                this.carStyle.backgroundImage = backgroundImage;
            } else if (this.obj.style.bgcolorType == "gradient") {
                if (this.obj.style.gradient.isRadial) {
                    this.carStyle.backgroundImage = `radial-gradient(${this.obj.style.gradient.colorStart}, ${this.obj.style.gradient.colorEnd})`;
                } else {
                    this.carStyle.backgroundImage = `linear-gradient(${this.obj.style.gradient.fontAngle}deg, ${this.obj.style.gradient.colorStart}, ${this.obj.style.gradient.colorEnd})`;
                }
            } else {
                this.carStyle.backgroundColor = backgroundColor;
            }

            // #endregion

            if (this.isEdit == false && this.obj.contactType > 0) {
                this.carStyle.cursor = "pointer";
            }
        },
        dataServerLazy(data) {
            this.dataList = [];
            clearInterval(this.timer2);
            this.fileIndex = 0;

            if (data.length) {
                data.forEach(e => {
                    try {
                        var item = JSON.parse(e);
                        if (item.type >= 0) {
                            this.fileType = item.type;
                        }
                        if (item.url) {
                            this.dataList.push(item.url);
                        }
                    } catch (e) {
                    }
                })

                // 开启倒计时轮播
                if (this.fileType == 0) {
                    this.timer2 = setInterval(() => {
                        this.fileIndex++;
                        if (this.fileIndex >= this.dataList.length) {
                            this.fileIndex = 0;
                        }
                    }, this.obj.tableData.timeSpeed * 1000);
                } else if (this.fileType == 1) {
                    this.$nextTick(function () {
                        this.$refs['media'].src = this.dataList[0];
                        this.$refs.media.play();

                        this.$refs.media.addEventListener('ended', () => {
                            // 判断是否循环播放
                            if (this.dataList.length > 1) {
                                this.fileIndex++;
                                if (this.fileIndex >= this.dataList.length) {
                                    this.fileIndex = 0;
                                }
                            }
                            this.$refs.media.src = this.dataList[this.fileIndex];
                        }, false)
                    })
                }
            }
        }
    },
    watch: {
        obj: {
            deep: true,
            handler(newVal, oldVal) {
                this.setStyle();

                if (JSON.stringify(this.obj.tableData) != this.dataStr) {
                    this.dataStr = JSON.stringify(this.obj.tableData);

                    if (this.obj.tableData.colId) {
                        this.reloadInfo();
                    }
                }
            }
        }
    },
}
</script>

<style scoped>
.cardimg {
    position: relative;
    top: 0;
    left: 0;
}

.defaultText {
    width: 100%;
    height: 100%;
    justify-content: center;
    display: flex;
    align-items: center;
}

.videplay {
    object-fit: cover;
}
</style>